<template>
  <!-- 轮播图 -->
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item v-for="item in SwipeOne" :key="item.id">
      <img :src="item.pic" class="SwipeImg" />
    </van-swipe-item>
  </van-swipe>
  <!-- 轮播图 -->

  <CellsComp value="更多" title="人气M音" icon="fire-o"></CellsComp>
  <!-- 单元格 -->

  <!-- 宫格 -->
  <van-grid
    id="Grid-one"
    :column-num="4"
    :gutter="20"
    :border="false"
    :clickable="true"
    :center="false"
  >
    <van-grid-item
      v-for="item in SwipeTwo"
      :key="item.id"
      :text="item.soundstr"
      style="margin: 0px; height: 192px"
    >
      <template #icon>
        <img :src="item.front_cover" alt="" style="width: 80px; height: 80px" />
      </template>
    </van-grid-item>
    <CellsCompTow></CellsCompTow>
  </van-grid>
  <!-- 宫格 -->

  <div v-for="item in ClessOne" :key="item.id" class="CellsCompStyle">
    <!-- 单元格 -->
    <CellsComp value="更多" :title="item.title" icon="fire-o"></CellsComp>
    <!-- 单元格 -->

    <!-- 宫格 -->
    <van-grid
      id="Grid-one"
      :column-num="4"
      :gutter="20"
      :border="false"
      :clickable="true"
      :center="false"
    >
      <van-grid-item
        v-for="v in item.objects_point"
        :key="v.id"
        :text="v.soundstr"
        style="margin: 0px; height: 192px"
      >
        <template #icon>
          <img :src="v.front_cover" alt="" style="width: 80px; height: 80px" />
        </template>
      </van-grid-item>
      <CellsCompTow></CellsCompTow>
    </van-grid>
    <!-- 宫格 -->
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getSwipe, getRecommendLarge } from "../api/api";

const SwipeOne = ref([]);
const SwipeTwo = ref([]);
const ClessOne = ref([]);

//轮播图
const getBannerList = async () => {
  const res = await getSwipe();
  console.log(2, res);
  if (res.status === 200) {
    SwipeOne.value = res.data.info.banner;
    SwipeTwo.value = res.data.info.sound;
  }
};

//宫格
const getMany = async () => {
  const res = await getRecommendLarge();
  console.log(3, res);
  console.log(4, res.data.info.music);
  if (res.status === 200) {
    ClessOne.value = res.data.info.music;
  }
};

onMounted(() => {
  getBannerList();
  getMany();
});
</script>

<style scoped lang="scss">
#van-tab-3 {
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    height: 125px;
    .SwipeImg {
      height: 100%;
    }
  }
  .CellsCompStyle {
    height: 240px;
  }
}
</style>
